@import "reset.css";
@import "../font/iconfont.css";


#page{
    max-width: 750px;
    margin: 0 auto;
}

html,body,#page{
    height: 100%;
}

#page{
    display: flex;
    flex-direction: column;
    max-width: 750px;
    margin: 0 auto;
}

/*顶部*/
#header_top{
    height: .64rem;
    display: flex;
    background-color: #ff6040;
    padding: .45rem .12rem .16rem .33rem;
    justify-content: space-between;
    align-items: center;
    color: #ffdfd8;
    font-size: .3rem;
    p{
        span{
            &.iconfont{
                font-size: .3rem;
                color: #ffdfd8;
            }
        }
        &.iconfont{
            font-size: .3rem;
            color: #ffdfd8;
        }
        &:nth-child(2){
            margin: 0 .4rem 0 1.7rem;
        }
        &:nth-child(3){
            width: 1.74rem;
            height: .64rem;
            border: 1px solid #ff8a6f;
            border-radius: .4rem;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-around;
            position: relative;
            i{
                width: 1px;
                height: 0.37rem;
                background-color: #ff896e;
                position: absolute;
            }
        }
    }
}

/*导航*/
nav{
    height: .6rem;
    background: linear-gradient(#ff6040,#ff887d);
    ul{
        display: flex;
        height: .6rem;
        padding: 0 .71rem 0 .67rem;
        justify-content: space-between;
        
        li{
            height: .6rem;
            width: .54rem;
            display: flex;
            align-items: center;
            a{
                display: block;
                color: #fff3f2;
                font-size: .26rem;
                position: absolute;
                &.cur{
                    font-size: .3rem;
                    font-weight: bold;                    
                }
                i{
                    width: .4rem;
                    height: .04rem;
                    background-color: #fff;
                    border-radius: .02rem;
                    position: absolute;
                    bottom: -.1rem;
                    left: .1rem;
                }
            }
        }
    }
}

/*内容*/ 



/*海报*/ 
#banner{
    height: 7.5rem;
    position: relative;
    img{
        height: 100%;
    }
    p{
        width: 0.82rem;
        height: 0.36rem;
        background-color: #595456;
        color: #fff;
        font-size: .22rem;
        text-align: center;
        line-height: .36rem;
        border-radius: .18rem;
        position: absolute;
        right: .2rem;
        bottom: .2rem;
    }
    span{
        position: absolute;
        right: .2rem;
        top: .2rem;
        &.iconfont{
            font-size: .48rem;
            color: #5b5959;
        }
    }
}

/*价格*/ 
#price{
    height: 2.9rem;
    background-color: #fff;
    padding: .2rem .2rem .15rem;
    box-sizing: border-box;
    p{
        &:nth-child(1){
            height: .44rem;
            font-size: .2rem;
            margin-bottom: .2rem;
            position: relative;
            i{
                color: #ff6040;
                font-weight: bold;
            }
            em{
                color: #ff6040;
                font-size: .46rem;
                font-weight: bold;
                margin-right: .15rem;
            }
            del{
                color: #979797;
                font-weight: bold;
            }
            .last{
                position: absolute;
                right: 0;
                top: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                width: .5rem;
                color: #ff6444;
                span{
                    font-size: .18rem;
                    white-space: nowrap;
                    &.iconfont{
                        font-size: .18rem;
                        color: #ff6444;
                    }
                }
                
            }
        }

        &:nth-child(2){
            font-size: .3rem;
            height: .3rem;
            color: #333333;
            margin-bottom: .12rem;
        }
        &:nth-child(3){
            font-size: .24rem;
            height: .24rem;
            color: #999999;
            margin-bottom: .25rem;
        }
        &:nth-child(4){
            font-size: .18rem;
            height: .32rem;
            width: 1.66rem;
            text-align: center;
            line-height: .32rem;
            color: #fff0ed;
            background-color: #ff8066;
            margin-bottom: .2rem;
        }
        &:nth-child(5){
            font-size: .16rem;
            height: .4rem;            
            line-height: .4rem;
            color: #a5a5a5;
            background-color: #f2f2f2;
            span{
                &:nth-child(1){
                    float: left;
                }
                &:nth-child(2){
                    float: right;
                    color: #ff6040;
                    &.iconfont{
                        color: #ff6040;
                        font-size: .1rem;
                    }
                }
            }
        }
    }
}

/*领劵*/ 
#con{
    height: 1.57rem;
    background: #fff;
    margin-top: .2rem;
    p{       
        &:nth-child(1){
            height: .9rem;
            padding-top: .4rem;
            box-sizing: border-box;
            position: relative;
            span{
                display: block;
                float: left;
                color: #333333;
                font-size: .24rem;
                margin: 0 .4rem 0 .2rem;
            }
            img{
                float: left;
                vertical-align: top;
                height: .32rem;
                vertical-align: middle;
                margin-right: .2rem;
            }
            i{
                width: 6.4rem;
                height: 1px;
                background-color: #e6e6e6;
                position: absolute;
                right: 0;
                bottom: 0;
            }
        }
        
        &:nth-child(2){
            height: .67rem;
            padding-top: .32rem;
            box-sizing: border-box;
            span{
                &:nth-child(1){
                    display: block;
                    float: left;
                    color: #333333;
                    font-size: .24rem;
                    margin: 0 .4rem 0 .2rem;
                }
                &:nth-child(2){
                    display: block;
                    float: left;
                    color: #666666;
                    font-size: .22rem;
                }
                &:nth-child(3){
                    display: block;
                    float: right;
                    margin-right: .19rem;
                    &.iconfont{
                        font-size: .2rem;
                        color: #696969;
                    }
                }
            }
        }
    }
}

/*尾部*/ 
footer{
    height: 1.66rem;
    background: #fff;
    .top{
        border-top: 1px solid #cccccc;
        height: .98rem;
        .left{
            float: left;
            width: 3.0rem;
            height: .98rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            p{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                &:nth-child(1),&:nth-child(2),&:nth-child(3){
                    span{
                        font-size: .2rem;
                        color: #4f4f4f;
                        &.iconfont{
                            font-size: .3rem;
                            color: #333333;
                        }
                    }               
                }
                
        }
    }
        .right{
            float: right;
            width: 4.4rem;
            display: flex;
            p{
                &:nth-child(1){
                    width: 2.2rem;
                    height: .98rem;
                    line-height: .98rem;
                    text-align: center;
                    background-color: #ffcc66;
                    color: #663014;
                    font-size: .3rem;
                }                       
                &:nth-child(2){
                    width: 2.2rem;
                    height: .98rem;
                    line-height: .98rem;
                    text-align: center;
                    background-color: #ff6040;
                    color: #fff;
                    font-size: .3rem;
                }
            }
        }
    }
    .bottom{
        height: .68rem;
        display: flex;
        justify-content: center;
        position: relative;
        p{
            width: 2.68rem;
            height: .1rem;
            background-color: #000;
            border-radius: .05rem;
            position: absolute;
            bottom: .16rem;
        }
    }
}